/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-12 10:50:09
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-12 16:24:14
 */
import React, { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// import { setFilter } from '../store/actions/filter'

export default function Footer() {
  const todos = useSelector((state) => state.todos)
  const filter = useSelector((state) => state.filter) // all
  // const [selected, setSelected] = useState('all')
  const dispatch = useDispatch()
  var filterCount = todos.filter((item) => !item.isDone).length
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{filterCount}</strong> 未完成
      </span>
      <ul className="filters">
        <li>
          <a
            // className="all"
            // eslint-disable-next-line react/jsx-no-duplicate-props
            // className={selected === 'all' ? 'selected all' : 'all'}
            className={filter === 'all' ? 'selected all' : 'all'}
            href="#/"
            onClick={() => {
              // setSelected('all')
              dispatch({
                type: 'all',
                payload: 'all',
              })
            }}
          >
            所有
          </a>
        </li>
        <li>
          <a
            // className={selected === 'active' ? 'selected active' : 'active'}
            className={filter === 'active' ? 'selected active' : 'active'}
            href="#/active"
            onClick={() => {
              // setSelected('active')
              dispatch({
                type: 'active',
                payload: 'active',
              })
              dispatch({
                type: 'todos/SelectActive',
              })
            }}
          >
            待办
          </a>
        </li>
        <li>
          <a
            className={
              // selected === 'completed' ? 'selected completed' : 'completed'
              filter === 'completed' ? 'selected completed' : 'completed'
            }
            href="#/completed"
            onClick={() => {
              // setSelected('completed')
              dispatch({
                type: 'completed',
                payload: 'completed',
              })
              dispatch({
                type: 'todos/SelectCompleted',
              })
            }}
          >
            已完成
          </a>
        </li>
      </ul>
      <button onClick={() => {}} className="clear-completed">
        清空已完成
      </button>
    </footer>
  )
}
